<template>
<div id="question-manager-main">
  <el-header class="title"><h1>问题管理主页</h1></el-header>
  <div>
    <el-table
      class="table"
      :data="allQuestion.filter(data => !keyWord || data.name.toLowerCase().includes(keyWord.toLowerCase()) || data.id.toLowerCase().includes(keyWord.toLowerCase()))"
      style="width: 1221px"
      border stripe>
      <el-table-column prop="id" label="ID" width="280"></el-table-column>
      <el-table-column prop="title" label="问题标题" width="580"></el-table-column>
      <el-table-column prop="answered" label="是否解答" width="100">
        <template slot-scope="scope">
          <span v-text="scope.row.answered?'是':'否'"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template slot="header" slot-scope="scope">
          <el-input v-model="keyWord" size="mini" placeholder="输入问题名 / ID搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="$router.push('/admin/skill/questionEdit/' + scope.row.id)" type="success">详情</el-button>
          <el-button @click="" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="back-btn" style="transform: translate(47%)">
      <el-button type="info" @click="$router.push('/admin/skill/guide')">返回</el-button>
    </div>
    <el-pagination
      style="transform: translate(40%)"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  name: "question_manager",
  data() {
    return {
      allQuestion:[],
      keyWord: "",
      currentPage: 1,
      pageSize: 6,
      pageAmount: 0,
      total: 0
    }
  },
  mounted() {
    this.getQuestions(this.currentPage, this.pageSize);
  },
  methods: {
    getQuestions(current, size){
      const self = this;
      this.$axios({
        method: 'post',
        url: '/skill/question/pageQuestionCondition/'+current +'/'+size,
        data: {

        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        self.allQuestion = jsonObj.data.rows
        self.total = jsonObj.data.total;
        self.pageAmount = Math.floor(jsonObj.data.total / 6) + 1;
        self.currentPage += 1;
      })
    },

    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.getQuestions(this.currentPage, this.pageSize);
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getQuestions(this.currentPage, this.pageSize);
    }
  }
}
</script>

<style lang="scss" scoped>
#question-manager-main {
  position: relative;

  .title {
    text-align: center;
    margin-bottom: 40px;
  }

  .table {
    margin: 20px auto;
    height:500px;
  }

  .add-btn {
    position: absolute;
    top: 50px;
    right: 280px;
  }
  .back-btn {
    position: absolute;
    top: 50px;
    left: 180px;
  }

  .tabBar {
    height: 100px;
    width: 240px;
    margin: 20px auto;

    .pagination {
      display: flex;
      justify-content: space-around;
      list-style: none;
    }
  }
}
</style>
